/*
 * Copyright © 2015-2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import "../../styles/themes/cdap/mixins.less";
@import "./color-constants.less";

@node-box-width: 200px;
@node-box-height: 87px;
@node-box-height-big: 100px;
@condition-box-width: 105px;
@condition-box-height: 105px;
@endpoint-circle-radius: 7px;

.increase-border-height-width(@currentHeight, @currentWidth) {
  @current-border-width: 2px;
  @new-border-width: 3px;
  border-width: @new-border-width;

  margin: -(@new-border-width - @current-border-width);
  width: @currentWidth + (@new-border-width - @current-border-width) * 2;
  height: @currentHeight + (@new-border-width - @current-border-width) * 2;
}

.border-color-hover(@currentHeight, @currentWidth: @node-box-width) {
  border: 2px solid currentColor;

  &:hover {
    .increase-border-height-width(@currentHeight, @currentWidth);
    cursor: pointer;
  }

  &.drag-hover {
    .increase-border-height-width(@currentHeight, @currentWidth);

    .node {
      background-color: @configure-btn-bg-hover-color;
    }
  }
}

my-dag-plus {
  .zoom-control {
    z-index: 998;
    right: 15px;

    button.btn.btn-default {
      &[disabled] {
        opacity: 1;
        background-color: white;

        i.fa {
          opacity: 0.5;
        }
      }
    }
  }

  .my-js-dag.preview-mode {
    .box.action {
      .node {
        box-shadow: none;
        filter: drop-shadow(0 0 10px @preview-outline-color);
      }
    }
    .box .node {
      box-shadow: 0 0 0 2px @preview-outline-color;
    }
  }

  .my-js-dag {
    width: inherit;
    height: inherit;

    #diagram-container {
      position: relative;
      width: inherit;
      height: inherit;
      overflow: hidden;
    }

    &.disabled {
      background-image: none;
      border: 0;
      background-color: @table-bg;

      &.normal-cursor #dag-container * {
        cursor: default;
      }

      .border-radius(4px);

      .box {
        height: @node-box-height-big;
        .border-color-hover(@node-box-height-big);

        .node {
          cursor: initial;

          .endpoint-circle {
            top: 41px;
          }
        }

        &.condition {
          .node {
            .endpoint-circle-bottom {
              top: initial;
            }
          }
        }
      }

      .jsplumb-connector {
        cursor: initial;
      }

      .jsplumb-endpoint {
        &.condition-endpoint {
          cursor: initial;
        }
      }
    }

    .box {
      position: absolute;
      cursor: move;
      top: 150px;
      padding: 0;
      height: @node-box-height;
      width: @node-box-width;
      z-index: 2;
      .border-color-hover(@node-box-height);

      // Setting default node color
      color: @transform-plugins-color;
      left: 30vw;

      .node {
        position: relative;
        background-color: white;
        margin: 0 auto;
        padding: 12px;
        height: 100%;
        .box-shadow(0 10px 18px -9px fade(black, 50%));
        .transition(background-color 50ms linear);
        .transition(color 50ms linear);
        background-clip: border-box;
        z-index: 1;

        .endpoint-circle,
        .endpoint-circle-bottom {
          width: @endpoint-circle-radius * 2;
          height: @endpoint-circle-radius * 2;
          background-color: @endpoint-circle-bg-color;
          border-radius: 100%;
          position: absolute;
          right: -@endpoint-circle-radius;
          top: 35px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:before {
            content: '';
            position: absolute;
            left: 100%;
            width: 5px;
            border-bottom: 2px solid @endpoint-connection-hover-stroke-color;
            display: none;
          }

          &:after {
            content: '';
            width: 0;
            height: 0;
            border-top: @endpoint-circle-radius solid transparent;
            border-bottom: @endpoint-circle-radius solid transparent;
            border-left: @endpoint-circle-radius solid @endpoint-connection-hover-stroke-color;
            transform: translateX(12px);
            display: none;
          }

          .endpoint-caret {
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: @endpoint-circle-radius solid @endpoint-caret-bg-color;
            transform: translateX(1px);
          }

          &:hover,
          &.hover {
            &:not(.disabled) {
              background-color: @endpoint-connection-hover-stroke-color;

              &:before,
              &:after {
                display: block;
              }

              .endpoint-caret {
                visibility: hidden;
              }
            }
          }
        }

        .node-info {
          display: flex;

          .node-icon {
            font-size: 25px;
            display: inline-block;

            &.icon-container {
              img {
                height: 25px;
                width: 25px;
                vertical-align: top;
              }
            }
          }

          .node-metadata {
            display: inline-block;
            transform: translateY(-5px);
            margin-left: 8px;

            .node-name,
            .node-version {
              text-overflow: ellipsis;
              overflow: hidden;
            }

            .node-name {
              font-size: 14px;
              font-weight: bold;
            }

            .node-version {
              font-size: 11px;
            }
          }
        }

        .node-metrics {
          position: absolute;
          bottom: 26px;

          /* 24px = left & right padding of node content (12px x 2) */
          width: ~"-moz-calc(100% - 24px)";
          width: ~"-webkit-calc(100% - 24px)";
          width: ~"calc(100% - 24px)";
        }

        .node-actions {
          display: flex;
          position: absolute;
          width: 100%;
          bottom: 0;
          padding-bottom: 10px;
          padding-right: 12px;
          align-items: center;

          .menu-icon-node {
            padding-right: 12px;
            margin-left: auto;

            &.fa.fa-bars {
              &.disabled {
                cursor: not-allowed;
              }

              &:not(.disabled) {
                &:hover {
                  color: @hamburger-hover-color;
                }
              }
            }
          }
        }

        .error-node-notification {
          color: white;
          position: absolute;
          top: 1px;
          right: 3px;
          .badge-warning {
            background-color: @badge-warning-color;
          }
          .badge-danger {
            background-color: @badge-danger-color;
          }
        }

        .node-configure-btn {
          font-size: 13px;
          border: 1px solid currentColor;
          padding: 3px 7px;
          background-color: white;
          border-radius: 5px;
          display: none;

          .node-configure-btn-label {
            color: @configure-btn-label-color;
          }

          &:hover {
            background-color: @configure-btn-bg-hover-color;

            .node-configure-btn-label {
              color: @configure-btn-label-hover-color;
            }
          }

          &:focus {
            outline: none;
          }

          &.btn-shown {
            display: initial;
          }
        }

        &:hover,
        &:focus {
          .node-version {
            display: none;
          }

          .node-configure-btn {
            display: initial;
          }

          .menu-icon-node {
            &:not(.disabled) {
              color: @hamburger-node-hover-color;
            }
          }
        }
      }

      .menu-icon {
        font-size: 16px;
        color: @hamburger-menu-color;
      }

      &.realtimesource,
      &.streamingsource,
      &.batchsource {
        color: @source-plugins-color;
        left: 10vw;
      }

      &.errortransform {
        color: @error-transform;
        left: 30vw;
      }

      &.realtimesink,
      &.batchsink,
      &.alertpublisher,
      &.sparksink {
        color: @sink-plugins-color;
        left: 50vw;
      }

      &.action,
      &.sparkprogram {
        left: 10vw;
        top: 30vw;
      }

      &.action {
        color: @action-plugins-color;
      }

      &.sparkprogram {
        color: @spark-plugins-color;
      }
      &.condition {
        color: @condition-plugin-color;
        left: 30vw;

        width: @condition-box-width;
        height: @condition-box-height;

        .border-color-hover(@condition-box-height, @condition-box-width);

        .node {
          padding: 5px 0;

          .endpoint-circle {
            top: 44px;
            background-color: @condition-true-endpoint-bg-color;

            &:before {
              border-bottom-color: @condition-true-endpoint-bg-color;
            }

            &:after {
              border-left-color: @condition-true-endpoint-bg-color;
            }

            &:hover,
            &.hover {
              &:not(.disabled) {
                background-color: @condition-true-endpoint-bg-color;
              }
            }
          }

          .endpoint-circle-bottom {
            top: initial;
            bottom: -@endpoint-circle-radius;
            right: 43px;
            background-color: @condition-false-endpoint-bg-color;

            &:before {
              left: 6px;
              top: 100%;
              border-bottom: none;
              border-left: 2px solid @condition-false-endpoint-bg-color;
              height: 5px;
            }

            &:after {
              border-top: 7px solid @condition-false-endpoint-bg-color;
              border-left: 7px solid transparent;
              border-right: 7px solid transparent;
              transform: translate(-4px, 19px);
            }

            &:hover,
            &.hover {
              &:not(.disabled) {
                background-color: @condition-false-endpoint-bg-color;
              }
            }

            .endpoint-caret {
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              border-top: @endpoint-circle-radius solid @endpoint-caret-bg-color;
              transform: translateY(2px);
            }
          }

          .node-info {
            display: initial;
            text-align: center;

            .node-icon,
            .node-metadata {
              display: block;
            }

            .node-metadata {
              transform: initial;
              margin: initial;
            }
          }

          .node-actions {
            padding-bottom: 5px;
            padding-right: 7px;

            .menu-icon-node {
              padding-right: 0;
            }
          }
        }

        .node-popover-menu {
          right: -60px;
          top: 75px;
        }
      }
    }

    .dag-popover-menu,
    .node-popover-menu {
      width: 85px;
      border: 1px solid black;
      background-color: white;
      z-index: 1000;

      .menu-icon {
        color: @hamburger-hover-color;
        padding: 5px;
      }

      .menu-content {
        padding: 5px 10px;
        color: @configure-btn-label-color;

        .menu-content-action {
          &:hover {
            background-color: @node-menu-action-bg-color;
          }

          &.disabled {
            cursor: not-allowed;
            opacity: 0.5;
          }

          &.menu-content-delete {
            cursor: pointer;
            color: @node-menu-delete-color;
          }
        }

        hr {
          margin: 5px 0;
        }
      }
    }

    .node-popover-menu {
      position: absolute;
      right: -54px;
      top: 52px;
    }

    .dag-popover-menu {
      position: fixed;
    }

    .comment-box {
      position: absolute;
      width: 200px;
      min-height: 50px;
      background-color: @comment-box-color;
      border-radius: 4px;
      cursor: move;

      div.comment-content {
        padding: 15px;
        word-break: break-all;
      }

      textarea.form-control {
        height: 100px;
        background-color: @comment-box-color;
        resize: none;

        &:focus {
          border: none;
        }
      }

      .fa.fa-close {
        position: absolute;
        right: 3px;
        top: 3px;
        cursor: pointer;
        .opacity(0);
        .transition(opacity 0.2s ease);
      }
      &:hover {
        .fa.fa-close {
          .opacity(1);
        }
      }
    }

    .error-container {
      position: fixed;
      bottom: 50px;
      left: 0;
      right: 0;
      width: 75%;
      margin: 0 auto;

      .error-close-icon {
        cursor: pointer;
      }

      &.well {
        background-color: @brand-danger;
        .border-radius(8px);
        color: white;
      }
    }

    #dag-container {
      height: 100%;
      width: inherit;
      position: absolute;
    }

    svg.jsplumb-dragging {
      path {
        stroke: @endpoint-connection-hover-stroke-color;
        stroke-width: 2;
      }

      path:last-child {
        fill: @endpoint-connection-hover-stroke-color;
      }
    }

    .jsplumb-endpoint {
      z-index: 1;

      &.condition-endpoint {
        cursor: pointer;
        z-index: 2;
      }

      svg * {
        fill: transparent;
        stroke: transparent;
      }
    }

    .jsplumb-connector {
      cursor: pointer;

      path:last-child {
        stroke-width: 0;
      }
    }

    .jsplumb-dragging {
      z-index: 2;
    }

    .condition-label {
      color: @condition-label-color;
      background: @condition-plugin-color;
      padding: 6px;
      width: 42px;
      z-index: 2;
      border-radius: 15%;
      text-align: center;
      font-size: 11px;
      line-height: 6px;
    }

    /* metrics overlay */
    .metric-label-text {
      color: #397cf1;
      font-size: 12px;
    }

    .metric-error-label {
      color: @brand-danger;
    }
  }

  div.jsplumb-overlay {
    div.label-container {
      cursor: pointer;
      height: 14px;
      width: 14px;
      text-align: center;
      background-color: white;
      line-height: 14px;
      font-size: 10px;
      color: #4f5464;
      vertical-align: middle;
      .border-radius(1px);
      .box-shadow(0 0 0 3px fade(black, 20%));
      &:hover,
      &:focus {
        background-color: #4f5464;
        color: white;
      }
      i.icon-schemaedge {
        font-size: 9px;
      }
    }
  }
  .metric-label {
    display: inline-block;
    width: 100px;
  }

}

.tooltip .tooltip-inner {
  ul {
    padding-left: 20px;
  }
}

.badge-warning {
  background-color: @brand-warning;
}

.badge-error {
  background-color: @brand-danger;
}

.theme-cdap {
  .tooltip-warning {
    &.tooltip {
      &.top {
        .tooltip-arrow {
          border-top-color: @brand-warning;
        }
      }
    }
    .tooltip-inner {
      background-color: @brand-warning;
      border-color: @brand-warning;
    }
  }
  .tooltip-error {
    &.tooltip {
      &.top {
        .tooltip-arrow {
          border-top-color: @brand-danger;
        }
      }
    }
    .tooltip-inner {
      background-color: @brand-danger;
      border-color: @brand-danger;
    }
  }
}

.popover {
  min-width: 250px;
  max-width: 400px;

  .popover-title {
    background-color: white;
    border-bottom: 0;
    padding: 11px 10px;
    h4 span {
      font-weight: 500;
    }
    i.fa.fa-times {
      color: #b4b4b6;
      cursor: pointer;
    }
  }

  .popover-content {
    padding: 0 10px 10px;

    .schema-popover {
      max-height: 400px;
      overflow-y: auto;
      overflow-x: hidden;

      .well { margin-bottom: 0; }

      table.table-curved {
        background-color: transparent;
        border-left: 1px solid @table-border-color;
        margin-top: 0;
        margin-bottom: 0;
        th,
        td {
          border-left: 0;
        }
        th {
          border-bottom: 1px solid @table-border-color;
          color: #5f6674;
          font-size: 13px;
          font-weight: 500;
        }
        td {
          font-size: 13px;
          padding: 8px;
        }
      }
    }
  }
}
